<template>
  <view class="page">
	  <view class="container">
	    <!-- 顶部轮播图 -->
	    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
	      <swiper-item v-for="(item, index) in swiperList" :key="index">
	        <image :src="item.image" mode="aspectFill" class="swiper-image"></image>
	      </swiper-item>
	    </swiper>
	  
	    <!-- 工具箱功能按钮 -->
	    <view class="toolbox">
	      <view class="tool-item" v-for="(item, index) in toolList" :key="index" @click="handleToolClick(item)">
	        <image :src="item.icon" mode="aspectFit" class="tool-icon"></image>
	        <text class="tool-text">{{ item.name }}</text>
	      </view>
	    </view>
	  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [
        { image: '/static/banner.jpg' },
        { image: '/static/banner1.jpg' }
      ],
      // 工具箱数据
      toolList: [
        { url: '/pages/news/nba', name: 'NBA资讯', icon: '/static/nba.png' },
        { url: '/pages/qrcode/index', name: '二维码生成', icon: '/static/qrcode.jpg' },
        { url: '/pages/news/yule', name: '娱乐资讯', icon: '/static/yule.jpg' },
        { name: '工具4', icon: '/static/nba.png' },
        { name: '工具5', icon: '/static/nba.png' },
        { name: '工具6', icon: '/static/nba.png' },
      ]
    };
  },
  methods: {
    // 工具箱点击事件
    handleToolClick(item) {
      uni.navigateTo({
      	url:item.url
      })
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

/* 轮播图样式 */
.swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  margin-bottom: 10px;
  overflow: hidden;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

/* 工具箱布局 */
.toolbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 600px;
}

/* 工具项 */
.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 鼠标悬停效果 */
.tool-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 图标容器 */
.tool-icon-container {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 50%;
  margin-bottom: 15px;
}

/* 图标 */
.tool-icon {
  width: 60px;
  height: 60px;
}

/* 工具名称 */
.tool-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
</style>